import { Form, Input, Button, Modal } from 'antd';
import { UserOutlined, PhoneOutlined, MailOutlined } from '@ant-design/icons';
import React from 'react';
import { withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import action from '../../store/action/index';
import '../../static/css/person.less';


class CreateCandidate extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    createCandidateFail() {
        const modal = Modal.error({
            title: 'Create contact failed',
            content: 'Please try again!',
        });
        setTimeout(() => modal.destroy(), 2000);
    }

    onFinish = async values => {
        let { name, phone, email } = values;
        let result = await this.props.createCandidate({
            name: name,
            phone: phone,
            email: email
        });
        if (parseFloat(result.code) === 0) {
            this.props.history.push('/candidate');
            return;
        }
        this.createCandidateFail();
    };

    render() {
        return (
            <Form
                name="normal_login"
                className="login-form"
                initialValues={{
                    remember: true,
                }}
                onFinish={this.onFinish}
            >
                <Form.Item
                    name="name"
                    rules={[
                        {
                            required: true,
                            message: "Please input your candidate's name!",
                        },
                    ]}
                >
                    <Input prefix={<UserOutlined className="site-form-item-icon icon" />} placeholder="Candidate name" />
                </Form.Item>
                <Form.Item
                    name="phone"
                    rules={[
                        {
                            required: true,
                            message: "Please input your candidate's number!",
                        },
                    ]}
                >
                    <Input prefix={<PhoneOutlined className="site-form-item-icon icon" />} placeholder="Candidate phone" />
                </Form.Item>
                <Form.Item
                    name="email"
                    rules={[
                        {
                            type: 'email',
                            message: 'The input is not valid E-mail!',
                        },
                        {
                            required: true,
                            message: "Please input your candidate's E-mail!",
                        },
                    ]}
                >
                    <Input prefix={<MailOutlined className="site-form-item-icon icon" />} placeholder="Candidate email" />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit" className="login-form-button">
                        Add Contact
            </Button>
                </Form.Item>
            </Form>
        );
    }
}

export default withRouter(connect(state => state.person, { ...action.person, ...action.candidate })(CreateCandidate));